<template>
  <div class="setRole">
    <!-- 分配权限 -->
    <el-dialog
      :title="'为【' + myname + '】分配权限'"
      :visible="showRoleDialog"
    >
      <el-tree
        :data="roleList"
        show-checkbox
        default-expand-all
        check-strictly
        node-key="id"
        ref="mytree"
        :props="{ label: 'name' }"
      >
      </el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPermissionApi } from "@/api/permission.js";
import { getRoleDetailApi, setRoleRightApi } from "@/api/roles.js";
export default {
  // myname 当前分配权限的角色名
  // showRoleDialog 控制面板的显示与隐藏
  props: ["myname", "showRoleDialog"],
  data() {
    return {
      // 控制面板的显示与隐藏
      // showRoleDialog:false,
      // 权限列表
      roleList: [],
      // 当前操作的角色的 id
      roleId: "",
    };
  },
  methods: {
    // 根据ID获取角色详情 得到当前阿尼角色对应的权限列表
    async getRoleDetail(id) {
        this.roleId = id;
      const res = await getRoleDetailApi(id);
      //  console.log(res);
      //  将得到的角色的权限列表渲染到页面上
      this.$refs.mytree.setCheckedKeys(res.data.permIds);
    },
    // 得到所有的权限列表
    async getAllPermission() {
      const res = await getAllPermissionApi();
      this.roleList = this.trunData(res.data, "0");
    },
    // 转换为树状结构的方法
    trunData(arr, pid) {
      const res = [];
      arr.forEach((item) => {
        if (item.pid === pid) {
          const son = this.trunData(arr, item.id);
          if (son.length > 0) {
            item.children = son;
          }
          res.push(item);
        }
      });
      return res;
    },
    // 取消按钮
    cancel() {
      //  关闭面板
      this.$emit("update:showRoleDialog", false);
    },
    // 提交按钮
    async submit() {
        // 得到所有权限的集合
        const allRoleLst = this.$refs.mytree.getCheckedKeys();
        // console.log(allRoleLst);
      await setRoleRightApi({
        id: this.roleId,
        permIds: allRoleLst,
      });
    //   提示修改成功
    this.$message.success('修改成功')
    // 关闭面板
    this.$emit('update:showRoleDialog',false)
    },
  },
  created() {
    // 调用得到所有的权限列表函数
    this.getAllPermission();
  },
};
</script>

<style>
</style>